import {
    Divider,
    ColorPicker,
    Input,
    InputNumber,
    Select,
} from 'antd'

import { themeStore } from '../Config/zustand'

import { FontFamilyMapping, FontWeightMapping, FontStyleMapping } from '../Config/theme'



const SetSystemTITLE = () => {

    const { head, updateHead } = themeStore()
    const { title, fontColor, fontFamily, fontWeight, fontStyle, fontSize, fontShadowX, fontShadowY, fontShadowS, fontShadowB } = head

    const HeadFunc = (key, value) => {
        logo[key] = value
        updateHead(logo)
    }


    return (
        <div className='SetSystemTITLE'>
            <Divider orientation="left" >标题设置</Divider>
            <div className='Content'>
                <div>
                    <div className='title'>文字标题</div>
                    <div className='Label' >
                        <div>文字内容</div>
                        <Input value={title} onChange={e => HeadFunc('title', e.target.value)} />
                    </div>
                    <div className='Label'>
                        <div>文字颜色</div>
                        <ColorPicker value={fontColor} onChangeComplete={e => HeadFunc('fontColor', e.toHexString())} />
                    </div>
                    <div className='Label'>
                        <div>文字字体</div>
                        <Select value={fontFamily} options={FontFamilyMapping} onChange={e => HeadFunc('fontFamily', e)} />
                    </div>
                    <div className='Label'>
                        <div>文字加粗</div>
                        <Select value={fontWeight} options={FontWeightMapping} onChange={e => HeadFunc('fontWeight', e)} />
                    </div>
                    <div className='Label'>
                        <div>文字倾斜</div>
                        <Select value={fontStyle} options={FontStyleMapping} onChange={e => HeadFunc('fontStyle', e)} />
                    </div>
                    <div className='Label' >
                        <div>文字字号</div>
                        <InputNumber value={fontSize} onChange={e => HeadFunc('fontSize', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影X轴</div>
                        <InputNumber value={fontShadowX} onChange={e => HeadFunc('fontShadowX', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影Y轴</div>
                        <InputNumber value={fontShadowY} onChange={e => HeadFunc('fontShadowY', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影尺寸</div>
                        <InputNumber value={fontShadowS} onChange={e => HeadFunc('fontShadowS', e)} />
                    </div>
                    <div className='Label'>
                        <div>阴影颜色</div>
                        <ColorPicker value={fontShadowB} onChangeComplete={e => HeadFunc('fontShadowB', e.toHexString())} />
                    </div>
                </div>

            </div>
        </div>
    );
};

export default SetSystemTITLE;